<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>

<script>

    $(function(){
        var stock = 66;
        $(".productNumberSetting").keyup(function(){
            var num= $(".productNumberSetting").val();
            num = parseInt(num);
            if(isNaN(num))
                num= 1;
            if(num<=0)
                num = 1;
            if(num>stock)
                num = stock;
            $(".productNumberSetting").val(num);
        });

        $(".increaseNumber").click(function(){
            var num= $(".productNumberSetting").val();
            num++;
            if(num>stock)
                num = stock;
            $(".productNumberSetting").val(num);
        });
        $(".decreaseNumber").click(function(){
            var num= $(".productNumberSetting").val();
            --num;
            if(num<=0)
                num=1;
            $(".productNumberSetting").val(num);
        });

    });

</script>
<style>
    body{
        font-size: 12px;
        font-family: Arial;
    }
    div.imgAndInfo{
        margin: 40px 20px;
    }
    div.imgInimgAndInfo{
        width: 100px;
        float: left;
    }
    div.infoInimgAndInfo{
        padding: 0px 20px;
        overflow: hidden;
    }
    div.infoInimgAndInfo div.productTitle{
        color: black;
        font-size: 16px;
        font-weight: bold;
        margin: 0px 10px;
    }
    div.infoInimgAndInfo div.productSubTitle{
        color: #DD2727;
        font-size: 12px;
        margin: 0px 10px;
    }
    div.infoInimgAndInfo div.juhuasuan{
        background-color: #2DA77A;
        color: white;
        text-align: center;
        line-height: 40px;
        margin-top: 10px;
    }
    div.infoInimgAndInfo span.juhuasuanBig{
        font-size: 18px;
        font-weight: bold;
        font-family: 黑体;
    }
    div.infoInimgAndInfo span.juhuasuanTime{
        color: #FFC057;
        font-weight: bold;
    }
    div.infoInimgAndInfo div.productPriceDiv{
        background-image:url(https://how2j.cn/tmall/img/site/priceBackground.png);
        height: 102px;
        padding: 10px;
        color: #666666;
    }
    div.infoInimgAndInfo div.gouwujuanDiv{
        margin-top: 5px;
    }
    div.infoInimgAndInfo div.originalDiv{
        margin-top: 5px;
    }
    div.infoInimgAndInfo span.originalPriceDesc{
        color: #999999;
        display: inline-block;
        width: 68px;
    }
    div.infoInimgAndInfo span.originalPrice{
        font-family: Arial;
        font-size: 12px;
        color: #333333;
        text-decoration: line-through;
    }
    div.infoInimgAndInfo span.promotionPriceYuan{
        font-family: Arial;
        font-size: 18px;
        color: #C40000;
    }
    div.infoInimgAndInfo span.promotionPrice{
        color: #c40000;
        font-family: Arial;
        font-size: 30px;
        font-weight: bold;
    }
    div.infoInimgAndInfo span.promotionPriceDesc{
        color: #999999;
        display: inline-block;
        width: 68px;
        position: relative;
        left: 0px;
        top: -10px;
    }
    div.infoInimgAndInfo div.productSaleAndReviewNumber{
        margin: 20px 0px;
        border-top-style: dotted;
        border-top-color: #C9C9C9;
        border-top-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #C9C9C9;
        border-bottom-width: 1px;
        padding: 10px;
    }
    div.infoInimgAndInfo div.productSaleAndReviewNumber div{
        display: inline-block;
        width: 49%;
        text-align: center;
        color: #999999;
        font-size: 12px;
    }
    div.infoInimgAndInfo div.productSaleAndReviewNumber div:first-child{
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: #E5DFDA;
    }
    div.infoInimgAndInfo div.productNumber{
        color: #999999;
    }
    div.infoInimgAndInfo span.productNumberSettingSpan{
        border: 1px solid #999;
        display: inline-block;
        width: 43px;
        height: 32px;
        padding-top:7px;
    }
    div.infoInimgAndInfo input.productNumberSetting{
        border: 0px;
        height: 80%;
        width: 80%;
    }
    div.productNumber span.updown img{
        display:inline-block;
        vertical-align:top;
    }
    div.productNumber span.updown{
        border: 1px solid #999;
        display: block;
        width: 20px;
        height: 14px;
        text-align: center;
        padding-top:4px;
    }
    div.productNumber span.updownMiddle{
        height: 4px;
        display: block;
    }
    div.productNumber span.arrow{
        display: inline-block;
        width: 22px;
        height: 32px;
        vertical-align:top;
    }
    div.serviceCommitment{
        margin: 20px 0px;
    }
    div.infoInimgAndInfo span.serviceCommitmentDesc{
        color: #999999;
    }
    div.infoInimgAndInfo span.serviceCommitmentLink a{
        color: #666666;
    }
    div.buyDiv{
        margin: 20px auto;
        text-align: center;
    }
    div.buyDiv button{
        display: inline-block;
        margin: 0px 10px;
        width: 180px;
        height: 40px;
    }
    button.buyButton{
        border: 1px solid #C40000;
        background-color: #FFEDED;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        color: #C40000;
        font-family: arial;
    }
    button.addCartButton{
        border: 1px solid #C40000;
        background-color: #C40000;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        color: white;
        font-family: arial;
    }
    button.addCartButton span.glyphicon{
        font-size: 12px;
        margin-right: 8px;
    }
    a:hover{
        text-decoration:none;
    }
    .redColor{
        color: #C40000;
    }
    .boldWord{
        font-weight: bold;
    }
</style>
<div class="imgAndInfo">
    <div class="imgInimgAndInfo">
        <img width="100px" src="https://how2j.cn/tmall/img/productSingle/8619.jpg">
    </div>
    <div class="infoInimgAndInfo">
        <div class="productTitle">
            名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女
        </div>
        <div class="productSubTitle">
            高端定制 高档棉麻 现货即发 加购物车 领优惠卷
        </div>
        <div class="productPrice">
            <div class="juhuasuan">
                <span class="juhuasuanBig">聚划算</span>
                <span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
            </div>
            <div class="productPriceDiv">
                <div class="gouwujuanDiv"><img height="16px" src="https://how2j.cn/tmall/img/site/gouwujuan.png">
                    <span> 全天猫实物商品通用</span>
                </div>
                <div class="originalDiv">
                    <span class="originalPriceDesc">价格</span>
                    <span class="originalPriceYuan">¥</span>
                    <span class="originalPrice">
                        399.00
                    </span>
                </div>
                <div class="promotionDiv">
                    <span class="promotionPriceDesc">促销价 </span>
                    <span class="promotionPriceYuan">¥</span>
                    <span class="promotionPrice">
                        379.05
                    </span>
                </div>
            </div>
        </div>
        <div class="productSaleAndReviewNumber">
            <div>销量 <span class="redColor boldWord"> 50</span></div>
            <div>累计评价 <span class="redColor boldWord"> 19</span></div>
        </div>
        <div class="productNumber">
            <span>数量</span>
            <span>
                <span class="productNumberSettingSpan">
                <input type="text" value="1" class="productNumberSetting">
                </span>
                <span class="arrow">
                    <a class="increaseNumber" href="#nowhere">
                    <span class="updown">
                       <img src="https://how2j.cn/tmall/img/site/increase.png">
                    </span>
                    </a>
                    <span class="updownMiddle"> </span>
                    <a class="decreaseNumber" href="#nowhere">
                    <span class="updown">
                        <img src="https://how2j.cn/tmall/img/site/decrease.png">
                    </span>
                    </a>
                </span>
            件</span>
            <span>库存66件</span>
        </div>
        <div class="serviceCommitment">
            <span class="serviceCommitmentDesc">服务承诺</span>
            <span class="serviceCommitmentLink">
                <a href="#nowhere">正品保证</a>
                <a href="#nowhere">极速退款</a>
                <a href="#nowhere">赠运费险</a>
                <a href="#nowhere">七天无理由退换</a>
            </span>
        </div>
        <div class="buyDiv">
            <a href="#nowhere" class="buyLink"><button class="buyButton">立即购买</button></a>
            <a class="addCartLink" href="#nowhere"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
        </div>
    </div>
    <div style="clear:both"></div>
</div>